<script setup>
  import axios from 'axios'
  import {ref,reactive} from 'vue'

  let message = reactive({
    "code":1,
    "content":"88888"
  })
  function getLoveMessage(){
    // 使用 axios 发送请求
    // axios({设置请求的参数}) 请求三要素：1. 请求的 url 2. 请求的方式 3. 请求的参数
    let promise = axios({
      url:'https://api.uomg.com/api/rand.qinghua',
      method:'get',
      data:{
        // 当请求的方式为 post 的时候，data 中的数据会以 JSON 串形式放入请求体，否则会以keyvalue 的形式放在 url 后

      }
    })
    promise.then(
      function (response) {
        console.log(response)
        // response 响应结果对象
        // data 服务端响应回来的数据
        // status 响应状态码 200
        // headers 本次响应所有的响应头
        // request 本次请求发送时使用的 XMLHttpRequest 对象
        
        // message.code = response.data.code
        // message.content=response.data.content
        Object.assign(message,response.data) // 这个函数会将后面这个对象的同名属性值赋值给前面对象的同名属性值

      }
    ).catch(
      function(error){
        console.log(error)
      }
    )
  }

  // axios 可以简写
  function getLoveWords() {
    return axios({
      url:'https://api.uomg.com/api/rand.qinghua',
      method:'post',
      data:{
      }
    })
  }

//  简化1
  // function getLoveMessage2() {
  //   let promise = getLoveWords()
  //   promise.then(
  //     function(response){
  //       Object.assign(message,response.data)
  //     }
  //   )
  // }

// // 简化2
//     async function getLoveMessage2(){
//       let response = await getLoveWords()
//       Object.assign(message, response.data)
//     }

    //简化3
    async function getLoveMessage2() {
      // let {data} 为对象结构赋值语法，从一个对象中提取指定的元素
      let {data} = await getLoveWords()
      Object.assign(message,response.data)
    }
</script>

<template>
  <div>
    <h1 v-text="message"></h1>
    <button @click="getLoveMessage()">change</button>
  </div>
</template>

<style scoped>
</style>
